<template>
	<view>
		<view class="banner">
			<image src="../../static/img/img/banner01.jpg"/>
			
		</view>
		<view class="list">
			<view class="container" v-for="(item,index) in list">
				<!-- 排名 -->
				<view class="left">
					<view class="rank">
						<view class="rank_paiming">#{{index+1}}</view>
						<view class="rank_bottom">-</view>
					</view>
					<!-- 标志 -->
					<view class="logo">
						<image class="logo_img" :src="item.url"/>
					</view>
					
				</view>
				
				<!-- 文字信息 -->
				<view class="info">
					<view class="title">{{item.name}}</view>
					<view class="subtitle">Europe | <text class="jifen">{{item.integration}} Points</text></view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import {getRank} from "@/api/getRank.js"
	export default {
		data() {
			return {
				list:[]
			};
		},
		onLoad(){
			this.getList()
		},
		methods:{
			async getList(){
				try{
					const {data} = await getRank()
					this.list = data
				}catch(err){}
			}
		}
	};
</script>

<style lang="scss">
.banner{
	width: 100vw;
	height: 400rpx;
	image{
		width: 100%;
		height: 100%;
	}
}
	
.list{
	height: calc(100vh - 410rpx);
	overflow: auto;
	margin-top: 10rpx;
}	
	
/* 容器样式 */
.container {
	display: flex;
	align-items: center;
	background-color: #10192b;
	padding: 40rpx 40rpx;
	border-radius: 10rpx;
	margin: 10rpx; /* 添加外边距以区分不同实例 */
	.left{
		// width: 200rpx;
		display: flex;
		align-items: center;
		.rank{
			.rank_paiming{
				color:#35b0de ;
				font-weight: 600;
				height: 60rpx;
				background: #192b3f;
				width: 80rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius:10rpx 0 0 10rpx ;
			}
			.rank_bottom{
				background: #919395;
				color: #fff;
				width: 80rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius:0 0 0 10rpx ;
				font-weight: 600;
			}
			height: 120rpx;
		}
		.logo {
			position: relative;
			left: -5rpx;
			width: 120rpx;
			height:120rpx;
			margin-right: 20rpx;
			border-radius: 10rpx; /* 如果需要圆形或圆角效果 */
			background-color: #1f3447;
			display: flex;
			justify-content: center;
			align-items: center;
			.logo_img{
				width: 70%;
				height: 70%;
				// border-radius: 10rpx;
			}
		}
	}
}


/* 信息区域样式 */
.info {
	// flex: 1;
}

/* 标题样式 */
.title {
	color: white;
	font-size: 48rpx;
	font-weight: bold;
}

/* 副标题样式 */
.subtitle {
	color: #bfbfbf;
	font-size: 32rpx;
	margin-top: 10rpx;
}

.jifen{
	color: #35b0de;
	margin-left: 10rpx;
}
</style>